<template>
  <!-- 对话框表单 -->
    <el-dialog
        class="ba-approval-dialog"
        :close-on-click-modal="false"
        :model-value="approvalInfo.dialogShow"
        @close="closeDialog"
    >
        <template #header>
            <div class="title" v-drag="['.ba-approval-dialog', '.el-dialog__header']" v-zoom="'.ba-approval-dialog'">
                审批编号：{{ state.flowNo || '-' }}
            </div>
        </template>
        <el-scrollbar v-loading="dialogLoading" class="flow-wrap">
            <div class="flow-item" v-for="item in state.flowList">
                <div class="left-part" v-if="state.flowList.length>1">
                    <span class="icon-part"></span>
                    <span class="line-part"></span>
                </div>
                <div class="right-part" >
                    <div class="info-part">
                        <div class="info-part-top">
                            <span class="value-item">{{item.STAGENAME}}</span>
                            <span class="value-item">{{item.USERNAME}}</span>
                            <span class="value-item">{{item.STATUSFLAG=='1'?'同意':item.STATUSFLAG=='2'?'退回':'待审批'}}</span>
                            <span class="value-item">{{item.STATUSTIME||''}}</span>
                        </div>
                        <div class="info-part-bottom">
                            <!-- {{ approvalInfo.data.type }} -->
                            <el-input type="textarea" :disabled="approvalInfo.data.type=='view' || item.STATUSFLAG" v-model="item.NOTE" />
                        </div>
                    </div>
                    <div class="btn-part" v-if="approvalInfo.data.type=='approve'&&!item.STATUSFLAG">
                        <el-button :disabled="!item.ISCURRENT || item.USERNAME!=state.userInfo.nickname" type="success" @click="handleApprove('1',item)">{{ t('agree') }}</el-button>
                        <el-button :disabled="!item.ISCURRENT || item.USERNAME!=state.userInfo.nickname" type="info" @click="handleApprove('2',item)">{{ t('return') }}</el-button>
                    </div>
                </div>
            </div>
        </el-scrollbar>
    </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import { ref, onMounted, reactive , inject} from 'vue'
import { useI18n } from 'vue-i18n'
import { useApprovalInfo } from '/@/stores/approvalDialog'
import createAxios from '/@/utils/axios';
import type baTableClass from '/@/utils/baTable'

const { t } = useI18n()
const dialogLoading = ref(true)
const approvalInfo = useApprovalInfo()

onMounted(()=> {
    dialogLoading.value = false
    getFlowData()
})

const state = reactive({
    flowNo:'',
    flowList:Array<any>(),
    userInfo: JSON.parse(localStorage.getItem('adminInfo'))
})

const getFlowData = ()=>{
    dialogLoading.value = true
    createAxios({
        url:'admin/XCorpsq/flowdata',
        params:{
            bizno:approvalInfo.data.bizno
        }
    }).then((res:any)=>{
        state.flowList = res.data.list.reverse()
        if(state.flowList.length){
            state.flowNo = state.flowList[0].FLNO
        }else{
            state.flowNo = ''
        }
        dialogLoading.value = false
    }).catch(()=>{
        dialogLoading.value = false
    })
}
const closeDialog = ()=>{
   approvalInfo.setDialogShow(false)
}

const baTable = inject('baTable') as baTableClass

const handleApprove = (status:string,item:any)=>{

    createAxios({
        url:'admin/XCorpsq/flowdata_p',
        params:{
            id:item.ID,
            status,
            note:item.NOTE||'同意'
        }
    }).then(()=>{
        ElMessage.success(status=='1'?'审批成功！':"退回成功！")
        
        closeDialog()
        if(approvalInfo.data.callback){
            approvalInfo.data.callback()
        } else if(baTable){
            baTable.toggleForm()
        }
    })
}
</script>

<style scoped lang="scss">
.ba-approval-dialog {
    .flow-wrap {
        padding: 20px;

        .flow-item {
            position: relative;
            display: flex;
            margin-top: 16px;
            width:100%;
            // .value-item {
            //     border: 1px solid #ccc;
            // }
            .left-part {
                display: flex;
                flex-direction: column;
                margin-right: 10px;
                position: relative;
                .icon-part {
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    border: 1px solid #3f6ad8;
                    position: relative;
                    z-index: 1;
                    background-color: #fff;
                }
                .line-part {
                    width: 2px;
                    height: 100%;
                    background-color: #ccc;
                    position: absolute;
                    left: 40%;
                    top: 20px;
                }
            }
            .right-part {
                position: relative;
                top: -15px;
                flex: 1;
                display: flex;
                border: 1px solid #ccc;
                border-radius: 4px;
                padding: 10px;
                box-sizing: border-box;
                // box-shadow: var(--el-box-shadow-light);
                .info-part {
                    display: flex;
                    flex-direction: column;
                    width: 80%;
                    margin-right: 10px;
                    &-top {
                        display: flex;
                        .value-item {
                            padding: 4px 8px;
                            box-sizing: border-box;
                            flex: 1;
                            margin-right: 10px;
                            border: 1px solid #ccc;
                            border-radius: 2px;
                            &:last-child {
                                margin-right: 0;
                            }
                        }
                    }
                    &-bottom {
                        margin-top: 10px;
                        textarea {
                            width: 100%;
                        }
                    }
                }
                .btn-part {
                    // float: right;
                    flex: 1;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    // width: 20%;
                    .el-button+.el-button {
                        margin: 0;
                    }
                }
            }
        }
    }
}
</style>